import React, {Component} from 'react'
import {View, Text, ScrollView, TextInput, TouchableOpacity,Alert} from 'react-native'
import AnswerOperate from '../answers/answer_operate'
import {PostCreateNotificationApi} from '../../config/api'
import {refresh_notifications} from '../../redux/actions/notification'
import {connect} from 'react-redux'
import styles from '../../config/styles'

class NewNotificationStage2 extends Component {
    constructor (props) {
        super(props)
        const {params} = props.navigation.state
        this.state = {
            objectForSubmit: params.objectForSubmit,
            Key: params.key
        }
    }

    //点击角标删除attachment的事件
    onRemoveAttachment = (attachment_name) => {
        Alert.alert('删除提醒', '确认要删除这个附件吗？',[
                {text: '取消', onPress: () => {}},
                {text: '确定', onPress: () => {
                    let _attachments = this.state.attachments.filter((atta, index) => {
                        return atta.name != attachment_name
                    })
                    this.setState({attachments: _attachments})
                }}
            ]
        )
    }

     //附件完成上传之后
     onFinishedUpload = (name, type, awsPath) => {
        let _onDestroy = () => {this.onRemoveAttachment(name)}
        let new_attachment = {
            type: type,
            url: awsPath,
            name: name,
            allowDestroy: true,
            onDestroy: _onDestroy
        }
        this.state.objectForSubmit.attachments.push(new_attachment)
        this.setState({
            objectForSubmit: this.state.objectForSubmit
        })
    }

    //标题
    _onChangeTitle = (title) => {
        this.state.objectForSubmit.title = title
        this.setState({objectForSubmit: this.state.objectForSubmit})
    }

    //正文
    _onChangeContent = (content) => {
        this.state.objectForSubmit.description = content
        this.setState({objectForSubmit: this.state.objectForSubmit})
    }

    //提交表单
    submit = () => {
        const objectForSubmit = this.state.objectForSubmit
        if (objectForSubmit.title == "") {
            Toast.show('请填写标题')
            return
        }
        PostCreateNotificationApi(objectForSubmit).then((data) => {
            if (data.code == 0) {
                Toast.show('提交成功')
                this.props.dispatch(refresh_notifications())
                this.props.navigation.goBack(this.state.Key)
            } else {
                Toast('网络错误，请重新尝试')
            }
        })
    }

    render () {
        return (
            <ScrollView style={styles.scroll_view_container}>
                <View style={{backgroundColor: 'white', padding: 5}}>
                    <TextInput
                        placeholder={'标题'}
                        onChangeText={(txt) => {this._onChangeTitle(txt)}}
                        style={{height: 50, padding: 0, borderBottomColor: '#f8f8f8', borderBottomWidth: 1}}
                        textAlignVertical={'top'}
                        underlineColorAndroid="transparent"
                        blurOnSubmit={true}
                        value={this.state.objectForSubmit.title}
                    />
                    <AnswerOperate
                        onFinishedUpload={this.onFinishedUpload}
                        attachments={this.state.objectForSubmit.attachments}
                        onChangeContent={this._onChangeContent}
                        content={this.state.objectForSubmit.description}
                    />
                </View>   
                <TouchableOpacity style={[styles.as_large_button, styles.background_blue, {marginTop: 15}]} onPress={this.submit}>
                    <Text style={styles.text_white}>提交</Text>
                </TouchableOpacity> 
            </ScrollView>
        )
    }
}


const mapStateToProps = (state) => {
    return {
        notification: state.notification
    }
}

export default connect(mapStateToProps)(NewNotificationStage2)